Amazon ConnectにShopifyの顧客情報や購入履歴を連携させる

いわさ

2021.12.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

いわさです。

Amazon ConnectにはCustomer Profilesという機能があり、外部サービスと顧客情報の連携を行うことが出来ます。
先日Shopifyに対応したので試してみました。

仕組みとしては、Shopifyからの顧客情報や購入情報などをAmazon EventBridgeへShopifyから連携し、Connectでプロファイルとして取り込みます。
実は、ShopifyはそもそもAmazon EventBridgeとの統合機能自体はありました。

Connect Customer Profilesについては以下で紹介されています。
こちらがShopifyのイベントレコードに対応した形となります。

今回この機能を試してみたのですが、Shopifyの手順も以前と少し変わっているようだったのであわせて紹介したいと思います。

Shopifyカスタムアプリの準備

パートナーアカウントは作成済みで、Shopfy CLIから作成します。
この記事では、最新バージョンのv2.7.4を使用しています。

iwasa.takahito@hoge 20211225shopify % brew tap shopify/shopify
==> Tapping shopify/shopify

...

iwasa.takahito@hoge 20211225shopify % brew install shopify-cli
==> Downloading https://ghcr.io/v2/homebrew/core/libyaml/manifests/0.2.5

iwasa.takahito@hoge 20211225shopify % shopify version
2.7.4

アプリを新規作成します。
以下の手順でローカル環境にWebアプリが作成されつつ、開発アカウント上にカスタムアプリが作成されます。
Shopify CLIの認証情報連携のためブラウザでのログインが発生します。

iwasa.takahito@hoge 20211225shopify % shopify login
Logged into partner organization iwasa
iwasa.takahito@hoge 20211225shopify % shopify app create node
? App name
> new-custom-app
? What type of app are you building? (You chose: Custom: An app custom built for a single client.)
Partner organization iwasa (2xxxxx4)                                                                                                                                     
Using development store iwasa-shop1.myshopify.com                                                                                                                        
✓ node v14.15.4
✓ npm 6.14.10
┏━━ Cloning https://github.com/Shopify/shopify-app-node.git into hogeiwasa… ━━━━━━━━━━━
┗━━ ✓ Cloned into hogeiwasa ━━━━━━━━━━━━━━━━ (1.8s) ━━
┏━━ Installing dependencies with npm… ━━━━━━━━━
┃ ✓ Dependencies installed
┗━━ Dependencies installed ━━━━━━━━━(66.54s) ━━
✓ .env saved to project root
✓ hogeiwasa was created in the organization's Partner Dashboard https://partners.shopify.com/2xxxxx4/apps/6xxxxx1
⭑ Change directories to your new project folder hogeiwasa and run shopify app serve to start a local server
⭑ Then, visit https://partners.shopify.com/2xxxxx4/apps/6xxxxx1/test to install hogeiwasa on your Dev Store

カスタムアプリではアプリURLおよびリダイレクトURLを設定する必要があります。
Shopify CLIではngrokでパブリックアクセスをローカルアプリへフォワーディングし、開発することが可能です。

shopify app serveでngrokのトンネル作成とローカルアプリケーションの起動がされ、その際のエンドポイント名でカスタムアプリの設定値を更新してくれます。便利です。

iwasa.takahito@hoge hogeiwasa % shopify app serve
✓ curl @ /usr/bin/curl
✓ tar @ /usr/bin/tar
✓ Installing ngrok…
✓ ngrok tunnel running at https://c069-120-51-74-235.ngrok.io
⭑ To avoid tunnels that timeout, it is recommended to signup for a free ngrok
account at https://ngrok.com/signup. After you signup, install your
personalized authorization token using shopify app tunnel auth <token>.
✓ .env saved to project root
? Do you want to update your application url? (You chose: yes)
✓ Whitelist URLS updated in Partners Dashboard                                                                                                                           
                                                                                                                                                                         
⭑ To install and start using your app, open this URL in your browser:
https://c069-120-51-74-235.ngrok.io/auth?shop=iwasa-shop1.myshopify.com

┏━━ Running server… ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
┃ 
┃ > shopify-app-node@1.0.0 dev /Users/iwasa.takahito/work/20211225shopify/hogeiwasa
┃ > cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js
┃ 
┃ [nodemon] 2.0.7
┃ [nodemon] to restart at any time, enter `rs`
┃ [nodemon] watching path(s): server/index.js
┃ [nodemon] watching extensions: js,mjs,json
┃ [nodemon] starting `node ./server/index.js`
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ 
┃ Why you should do it regularly:
┃ https://github.com/browserslist/browserslist#browsers-data-updating
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ Loaded env from /Users/iwasa.takahito/work/20211225shopify/hogeiwasa/.env
┃ Browserslist: caniuse-lite is outdated. Please run:
┃ npx browserslist@latest --update-db
┃ 
┃ Why you should do it regularly:
┃ https://github.com/browserslist/browserslist#browsers-data-updating
┃ event - compiled successfully
┃ Attention: Next.js now collects completely anonymous telemetry regarding usage.
┃ This information is used to shape Next.js' roadmap and prioritize features.
┃ You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
┃ https://nextjs.org/telemetry
┃ 
┃ > Ready on http://localhost:8081

コンソールで出力される、https://c069-120-51-74-235.ngrok.io/auth?shop=iwasa-shop1.myshopify.comにアクセスし、オンラインストアへカスタムアプリのインストールを行います。

もし、ngrokのトークンを設定後も以下の画面が表示されるようであれば、一度トンネルの停止を試してみてください。

iwasa.takahito@hoge new-custom-app % shopify app tunnel stop
x ngrok tunnel stopped

EventBridgeの連携

EventBridgeの連携設定を行いましょう。
まずはShopifyパートナーダッシュボードでカスタムアプリのアプリ設定開き、イベントサブスクリプションからEventBridgeソースを作成します。
連携先のAWSアカウントIDと任意のイベントソース名を入力してください。イベントソース名は後ほどConnectコンソールで使用します。

Shopify側でイベントソースを作成すると、対象AWSアカウントのEventBridgeメニュー内にあるパートナーイベントソースが新規作成されます。
この時点ではステータスは保留中で、イベントバスが未設定の状態だと思います。
ここからAmazon ConnectでCustomer　Profilesの設定を行います。

Amazon ConnectのCustomer Profilesメニューで統合の追加を行い、Shopifyを選択します。

接続URLはShopifyパートナーポータル上のカスタムアプリのURLを設定し、クライアントIDは先程任意で指定したイベントソース名を設定します。

設定に不備がなければ、正常に設定された旨のメッセージが表示され、パートナーイベントソースもアクティブになっているかと思います。

Webhookの設定

カスタムアプリとEventBridgeの設定が完了したら、最後にWebhookの設定を行います。
購入時にWebhookを経由してEventBridgeへデータを送信する形となります。

設定の流れとしては認可コードの取得
アクセストークンの取得
アクセストークンを使ってWebhookに対象トピックを登録

という流れで登録します。

認可コードの取得

リダイレクトURLのクエリパラメータに認可コードが渡されるので、リダイレクトURLは何でも良いです。何でも良いですが、ShopifyカスタムアプリのリダイレクトURLでホワイトリストとして登録する必要があります。私は127.0.0.1を使い以下のようなURLにしました。(iwasa-shop1はカスタムアプリをインストールした開発用のオンラインストアです)

https://iwasa-shop1.myshopify.com/admin/oauth/authorize?client_id=hogehoge&scope=read_customers,read_orders,read_draft_orders&redirect_uri=http://127.0.0.1:3456&state=123456

ClientIDはShopifyカスタムアプリのクライアントIDを指定します。

カスタムアプリへの認可操作を行うと、以下のような形でリダイレクトされるのでCodeパラメータを取得します。

アクセストークンの取得

アクセストークンは専用エンドポイントへ先程の認可コードと、カスタムアプリのクライアントIDとシークレットをPOSTします。

iwasa.takahito@hoge ~ % curl -X POST -H "Content-Type: application/json" -d '
{
    "code": "0xxxxxxxxxxxd",
    "client_id": "7xxxxxxxxxx4",
    "client_secret": "sxxxxxxxxxxxxxxxxxxxc"
}
' https://iwasa-shop1.myshopify.com/admin/oauth/access_token
{
    "access_token":"sxxxxxxxxxxxxxxxxx1",
    "scope":"read_customers,read_orders,read_draft_orders"
}

Webhookトピック登録

アクセストークンをX-Shopify-Access-Tokenヘッダーに設定し、Webhookを登録します。
トピックの数だけ登録が必要なのでちょっと大変です。

topicは以下を指定します。

customers/create
customers/enable
customers/update
draft_orders/create
draft_orders/update
orders/cancelled
orders/create
orders/fulfilled
orders/paid
orders/partially_fulfilled
orders/updated

また、addressはEventBridgeパートナーイベントソースのARNを指定します。

確認

ここまでで、連携に必要な設定が終わりました。
Shopify側で情報を登録し、ConnectでCustome Profilesを確認してみましょう。

Shopifyで顧客情報の作成から購入

Shopifyで商品データ、顧客情報を登録し、購入履歴も作成します。
開発用で決済が出来なかったので、購入履歴については管理画面から後払いで作成し、確認済みとしました。
電話注文などで使う機能です。

メモも入れてみました。

Amazon Connectでエージェントアプリから確認

Amazon Connect側では先日のre:Invent 2021で登場した、エージェントアプリケーションで顧客情報を確認してみましょう。

エージェントアプリケーションは本日時点でまだプレビューのようなのでURLからアクセスしました。

エージェントアプリケーションで Customer Profiles にアクセスする - Amazon Connect

今回は管理者で実行したのでセキュリティプロファイルもデフォルトの設定済みのまま使います。
詳細は上記の洲崎さんがご紹介されています。

今回はエージェントアプリケーションで確認が出来れば良しなので、電話番号を取得した以外だと、キューやルーティングもデフォルトです。
問い合わせフローだけ、着信ですぐエージェントへ転送するようにしています。

着信時のCustomer Profileを確認してみましょう。

電話番号からShopifyで連携した情報が表示されていますね。メモも連携されていて良い感じです。
ただし、購入履歴についてはエージェントアプリケーションから確認することが出来ませんでした。

更新データの連携自体はされていそう。エージェントアプリケーション側の問題か？

ちなみに、CLIからは購入履歴を確認することが出来たので、連携自体は出来ていますね。

iwasa.takahito@hoge ~ % aws customer-profiles list-profile-objects --domain-name amazon-connect-iwasa --profile-id eea44a33ee014f30b86ea60aadc191c5 --object-type-name _order --profile hoge | jq
{
  "Items": [
    {
      "ObjectTypeName": "_order",
      "ProfileObjectUniqueKey": "7M7Iobaxh47Zk3rOteHGuVGuWd6YakaNZ4fY4jKov24=",
      "Object": "{\"OrderId\":\"319b57ead71f42688e07a81766f8b916\",\"CustomerEmail\":\"iwasa.takahito@exmaple.com\",\"CustomerPhone\":\"+81312345678\",\"CreatedDate\":\"2021-12-25T11:06:13+09:00\",\"UpdatedDate\":\"2021-12-25T11:13:56+09:00\",\"ProcessedDate\":\"2021-12-25T11:06:13+09:00\",\"ClosedDate\":\"2021-12-25T11:13:06+09:00\",\"CancelledDate\":null,\"CancelReason\":null,\"Name\":\"#1001\",\"AdditionalInformation\":\"hoge memo\",\"Gateway\":\"manual\",\"Status\":\"paid\",\"StatusCode\":\"ACTIVATED\",\"StatusUrl\":\"https://iwasa-shop1.myshopify.com/hoge/orders/b3fc147e8a366bdbb3e6bd41d63b04ff/authenticate?key=996c319a6088a8d85521d88c38799700\",\"CreditCardNumber\":null,\"CreditCardCompany\":null,\"FulfillmentStatus\":\"fulfilled\",\"TotalPrice\":\"550\",\"TotalTax\":\"50\",\"TotalDiscounts\":\"0\",\"TotalItemsPrice\":\"500\",\"TotalShippingPrice\":\"0\",\"TotalTipReceived\":\"0\",\"Currency\":\"JPY\",\"TotalWeight\":\"0\",\"BillingAddress\":null,\"ShippingAddress\":{\"Name\":\"いわさいわさ\",\"Address1\":\"じゅうしょ\",\"Address2\":null,\"Address3\":null,\"Address4\":null,\"City\":\"さっぽろし\",\"County\":null,\"State\":null,\"Province\":\"Hokkaidō\",\"Country\":\"Japan\",\"PostalCode\":\"060-0001\"},\"OrderItems\":[{\"Title\":\"商品1\",\"Price\":\"500\",\"Quantity\":\"1\"}],\"Attributes\":{\"ShopifyOrderId\":\"4305062002735\",\"ShopifyCustomerId\":\"hoge\"}}"
    },
    {
      "ObjectTypeName": "_order",
      "ProfileObjectUniqueKey": "1btwCSr8uGHBjPxY0HoDS94gwxN10YjUV8R50RhGVaI=",
      "Object": "{\"OrderId\":\"be8942dd268e420d9a95f28e6984c7ff\",\"CustomerEmail\":\"iwasa.takahito@exmaple.com\",\"CustomerPhone\":null,\"CreatedDate\":\"2021-12-25T11:06:01+09:00\",\"UpdatedDate\":\"2021-12-25T11:06:13+09:00\",\"ProcessedDate\":null,\"ClosedDate\":null,\"CancelledDate\":null,\"CancelReason\":null,\"Name\":\"#D1\",\"AdditionalInformation\":\"hoge memo\",\"Gateway\":null,\"Status\":\"completed\",\"StatusCode\":\"DRAFT\",\"StatusUrl\":\"https://iwasa-shop1.myshopify.com/hoge/invoices/9cbc8033946773bf1eb7f89e906d5730\",\"CreditCardNumber\":null,\"CreditCardCompany\":null,\"FulfillmentStatus\":null,\"TotalPrice\":\"550\",\"TotalTax\":\"50\",\"TotalDiscounts\":null,\"TotalItemsPrice\":null,\"TotalShippingPrice\":null,\"TotalTipReceived\":null,\"Currency\":\"JPY\",\"TotalWeight\":null,\"BillingAddress\":null,\"ShippingAddress\":null,\"OrderItems\":[{\"Title\":\"商品1\",\"Price\":\"500\",\"Quantity\":\"1\"}],\"Attributes\":{\"ShopifyOrderId\":\"894868291631\",\"ShopifyCustomerId\":\"hoge\"}}"
    }
  ]
}

ドキュメント見る限りではエージェントアプリケーションで購入履歴まで表示出来るよう思えるので、エージェントアプリケーションがプレビューということもあり後日また確認してみたいと思います。